<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>项目</title>
    <link href="/css/header_and_nav.css" rel="stylesheet">
    <link href="/css/list.css" rel="stylesheet">
</head>
<body>
    <header th:include="header :: copy"></header>
    <nav th:include="nav :: my_nav" class="my_nav"></nav>

    <div class="container">
        <div>
            <button class="my_list_button" id="addProject">添加项目</button>
        </div>
        <ul class="my_list">
            <li th:each="project: ${projects}">
                <span th:text="${project.name}"></span>
                <span th:text="${project.language}"></span>
                <span th:text="${project.modified}"></span>
                <form action="/projectDetail.do" method="post">
                    <input type="hidden" name="id" th:value="${project.id}"/>
                    <button class="my_list_button" type="submit">查看详情</button>
                </form>
            </li>
        </ul>

        <div class="my_list_buttons">
            <form action="/projectList.do" method="post">
                <input type="hidden" name="page" th:value="${page - 1}"/>
                <button  class="my_list_button" type="submit" th:if="${page > 1}">上一页</button>
            </form>
            <form action="/projectList.do" method="post">
                <input type="hidden" name="page" th:value="${page + 1}"/>
                <button  class="my_list_button" type="submit" th:if="${size == max_size}">下一页</button>
            </form>
        </div>
    </div>

    <div class="modal" id="addProjectModal">
        <div class="modal_content">
            <span class="close">&times;</span>
            <form action="/addProject.do" method="post">
                <label>项目名称：</label>
                <input type="text" name="name"/>
                <label>项目语言：</label>
                <input type="text" name="language"/>
                <label>项目描述：</label>
                <textarea name="description" rows="4"  cols="50"></textarea>
                <label>项目地址：</label>
                <input type="text" name="url"/>
                <button class="my_list_button" type="submit">添加</button>
            </form>
        </div>
    </div>

    <script>
        var addProjectModal = document.getElementById('addProjectModal');
        var addProject = document.getElementById('addProject');
        var close = document.getElementsByClassName('close')[0];

        addProject.onclick = function() {
            addProjectModal.style.display = 'block';
        }

        close.onclick = function() {
            addProjectModal.style.display = 'none';
        }

        window.onclick = function(event) {
            if (event.target === addProjectModal) {
                addProjectModal.style.display = 'none';
            }
        }
    </script>
</body>
</html>
